<template>
  <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      width="60%"
      :before-close="handleClose">
    <el-form @submit.native.prevent :model="activity" :rules="rules" ref="activityForm" label-width="100px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="活动名称:" prop="activityName" style="width: 300px;">
            <el-input v-model="activity.activityName" placeholder="请输入活动名称" style="width: 200px;"  size="small" clearable></el-input>
          </el-form-item>
          <el-form-item label="创建日期:" prop="createtime" style="width: 300px;">
            <el-date-picker
                v-model="activity.createtime"
                type="datetime"
                placeholder="选择日期时间"
                align="right"
                size="small"
                style="width: 200px;"
                value-format="yyyy-MM-dd HH:mm:ss">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="修改日期:" prop="updatetime" style="width: 300px;">
            <el-date-picker
                v-model="activity.updatetime"
                type="datetime"
                placeholder="选择日期时间"
                align="right"
                size="small"
                style="width: 200px;"
                value-format="yyyy-MM-dd HH:mm:ss">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-upload
              style="margin-top: 15px;"
              action="/uploadController/upload"
              list-type="picture-card"
              :limit="1"
              :on-success="onSuccess"
              :on-preview="handlePictureCardPreview"
              :on-remove="handleRemove">
            <i class="el-icon-plus"></i>
          </el-upload>
        </el-col>
      </el-row>
    </el-form>
    <span slot="footer" class="dialog-footer">
          <el-button @click="cancelActivity" size="small">取 消</el-button>
          <el-button type="primary" @click="saveActivity" size="small">确 定</el-button>
        </span>
  </el-dialog>
</template>

<script>
import {Message} from "element-ui";

export default {
  name: "ActivityOper",
  data() {
    return {
      title: '',
      dialogVisible: false,
      activity:{
        activityName: '',
        createtime: '',
        updatetime: '',
        uploadFileId: ''
      },
      rules:{
        activityName: [
          { required:true,message:"请输入活动名称", trigger: 'blur' },
          { min:3,max:10,message: "长度在3到10个字符之间", trigger: 'blur' }
        ],
        createtime: [{required: true, message: '请输入创建日期', trigger: 'blur'}],
        updatetime: [{required: true, message: '请输入修改日期日期', trigger: 'blur'}],
      },
    };
  },
  methods: {
    clearObj(obj) {
      Object.keys(obj).forEach(key => {
        obj[key] = "";
      });
    },
    closeView() {
      this.dialogVisible = false;
    },
    removeImage(fileId) {
      this.deleteRequest("/uploadController/delete", {id: this.activity.uploadFileId}).then(resp => {
        if (resp.code === 200) {
          Message.success("删除成功！");
        } else {
          Message.error("删除失败！");
        }
      });
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
    },
    handleRemove(file, fileList) {
      this.removeImage(this.activity.uploadFileId);
    },
    handlePictureCardPreview(file) {
      this.imgUrl = file.url;
    },
    onSuccess(resp,file,fileList) {
      if (resp.data) {
        this.getRequest("/uploadController/getUploadFileInfo", {"compression": resp.data.compression}).then(resp => {
          if (resp) {
            this.activity.uploadFileId = resp.data.id;
          }
        });
      }
    },
    cancelActivity() {
      // if (this.activity.uploadFileId) {
      //   this.removeImage(this.activity.uploadFileId);
      // }
      this.closeView();
    },
    /**
     * 保存活动
     */
    saveActivity() {

      this.activity.createtime = new Date(this.activity.createtime).Format("yyyy-MM-dd hh:mm:ss");
      this.activity.updatetime = new Date(this.activity.createtime).Format("yyyy-MM-dd hh:mm:ss");
      this.$refs['activityForm'].validate(validate => {
        if (validate) {
          this.putRequest("/activity/", this.activity).then(resp => {
            if (resp.code === 200) {
              Message.success("添加成功");
              this.closeView();
            } else {
              Message.success("添加失败");
            }
          });
        }
      });

    }
  }
}
</script>

<style scoped>

</style>
